<template>
  <div>
    <div v-if="user == null" class="myform">
      <div class="center">
        <div class="register">
          <h2>会员登陆</h2>
          <div class="regform">
            <div>
              <span style="margin-right: 12px">用户名：</span>
              <input
                style="width: 220px"
                type="text"
                v-model="uname"
                placeholder="请输入用户名"
              />
            </div>
            <div>
              <span style="margin-right: 25px">密码：</span
              ><input
                style="width: 220px"
                type="password"
                v-model="upwd"
                placeholder="请输入密码"
              />
              <a href="" style="color: #a56224">忘记密码？</a>
            </div>
            <div style="margin-left: 70px; margin-bottom: 10px">
              <input type="checkbox" />
              <span>请保存我这次的登陆操作</span>
            </div>
            <button @click="checkForm">确定登录</button>
            <button>
              <router-link to="/main/register">注册会员</router-link>
            </button>
            <div style="margin-left: 70px; margin-top: 10px">
              您还可以使用以下个人帐号登录黑池：
              <hr />
            </div>
            <div style="text-align: center; margin-bottom: 20px">
              <img
                style="margin-right: 25px"
                src="../assets/image/login_wei.jpg"
                alt=""
              />
              |&nbsp;&nbsp;
              <img
                style="margin-right: 25px"
                src="../assets/image/login_qq.jpg"
                alt=""
              />
              |&nbsp;
              <img src="../assets/image/login_zhi.jpg" alt="" />
            </div>
            <hr />
            <div style="padding: 5px">
              <span style="color: #a56224">尊敬的顾客：</span><br />
              如果您曾经通过电话订购黑池产品，你原有的会员数据已经导入到网站。<br />
              如您收到过黑池的短信通知，请您用短信中的用户名和密码登录。<br />
              如果没有收到，请使用网站的“找回密码”功能找回密码。
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else style="width:50vw;margin:20px auto">
        <img style="width:100%" src="/image/1618477408.jpg" alt="">
    </div>
  </div>
</template>

<script>
import { mapState} from "vuex";
export default {
  data() {
    return {
      uname: "",
      upwd: "",
    };
  },
  methods: {
    checkForm() {
      let url = "/mp/login";
      let params = `uname=${this.uname}&upwd=${this.upwd}`;
      this.axios
        .post(url, params)
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            alert("登录成功，即将跳转至首页");
            this.$store.commit("updateUser", this.uname);
            this.$router.push("/");
          } else {
            alert("用户名或密码错误，请重新检查再登录");
          }
        })
        .catch((err) => {});
    },
  },
  computed: {
    ...mapState(["user"]),
  },
};
</script>

<style lang="scss" scoped>
.myform {
  margin-top: 40px;
  .center {
    border: 1px solid blanchedalmond;
    background-color: #f3f0ed;
    width: 50%;
    margin: auto;
    .register {
      padding: 10px;
      color: #543018;
      div {
        font-size: 13px;
      }
      .regform {
        width: 55%;
        margin: auto;
        transform: translateX(15%);
        i {
          color: red;
          margin-right: 2px;
          font-size: 20px;
        }
        button {
          border-radius: 5px;
          background-color: #543018;
          color: white;
          padding: 5px;
          width: 80px;
          transform: translateX(75px);
          margin-right: 35px;
          a {
            color: white;
          }
        }
      }
      h2 {
        text-align: center;
        color: #a56224;
      }
    }
  }
  input {
    padding: 5px;
    margin: 10px 10px;
  }
}
</style>